﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="frmReporte.aspx.cs" Inherits="WEB.frmReporte" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div class="span12">
        <legend><h2><b>Entrada de Reportes</b></h2></legend>
        <div class="span12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>Rango de Fechas</h2>
                    <input type="checkbox" id="cbOpciones"/>
                    <asp:DropDownList ID="ddlOpciones" runat="server"/>
                    <table>
                        <tr>
                            <td><label>Desde:</label></td>
                            <td><input type="date" id="dtpFecha1" style="width: 160px;" class="form-control"/></td>
                            <td><label>Hasta:</label></td>
                            <td><input type="date" id="dtpFecha2" style="width: 160px;" class="form-control"/></td>
                            <td><button onclick="dibujar();" id="btnReporte" class="btn btn-primary">Ver Reporte</button></td>
                        </tr>
                    </table> 
                </div>
                <div class="panel-body">
                    
                    hola
                     <script >
                         (function basic(container) {

                             var
                                 d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
                                 d2 = [],                                // Second data series
                                 i, graph;

                             // Generate first data set
                             for (i = 0; i < 14; i += 0.5) {
                                 d2.push([i, Math.sin(i)]);
                             }

                             // Draw Graph
                             graph = Flotr.draw(container, [d1, d2], {
                                 xaxis: {
                                     minorTickFreq: 4
                                 },
                                 grid: {
                                     minorVerticalLines: true
                                 }
                             });
                         })(document.getElementById("editor-render-0"));
                     </script>      
                    <script type="text/javascript">
                         function dibujar(){ var ctx = document.getElementById ('nuestroCanvas'); var contenido = ctx.getContext ('2d'); var imagenGrafica = new Image(); imagenGrafica.src = 'grafica.png'; imagenGrafica.onload = function(){
                    //Cargo la imagen en la posición contenido.drawImage(imagenGrafica,0,0); //Indicar el grosor de la línea contenido.lineWidth = 4; //Dibujo las líneas para simular la gráfica contenido.beginPath(); contenido.moveTo(16,156); contenido.lineTo(77,66); contenido.lineTo(135,100); contenido.lineTo(194,200); contenido.lineTo(255,185); contenido.lineTo(316,195); contenido.lineTo(376,155); contenido.lineTo(436,185); contenido.strokeStyle = "hsla(333, 71%, 53%, 1)"; contenido.stroke(); //Indicar el grosor de la línea contenido.lineWidth = 1; //Dibujo las líneas para simular la gráfica contenido.beginPath(); contenido.moveTo(16,126); contenido.lineTo(77,176); contenido.lineTo(135,160); contenido.lineTo(194,100); contenido.lineTo(255,155); contenido.lineTo(316,225); contenido.lineTo(376,85); contenido.lineTo(436,185); contenido.strokeStyle = "hsla(120, 100%, 50%, 1)"; contenido.stroke(); } } </script> - See more at: http://untitled.es/crear-una-grafica-con-html5-y-canvas/#sthash.rlEfIkhf.dpuf                     
                </div>
                <div></div>
            </div>
            
            
            
            
            
            
        </div>
    </div>
</asp:Content>
